<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月'],
          color: '#fff',
          axisTick: {
            show: false
          },
          axisLabel: {
            align: 'center',
            interval: 0,
            color: '#fff',
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          nameTextStyle: {
            align: 'right'
          },
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ffff'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#333'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#20243D'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff', // 坐标值得具体的颜色
              fontSize: 14
            }
          }
        },
        grid: {
          left: '12%',
          bottom: '12%'
        },
        legend: {
          right: 0,
          align: 'left',
          data: ['本地车辆', '外来车辆'],
          textStyle: {
            color: '#fff',
            fontSize: 18,
          }
        },
        series: [
          {
            name: '本地车辆',
            data: [120, 200, 150, 80, 70],
            type: 'bar',
            // showBackground: true,
            itemStyle: {
              normal: {}
            },
          },
          {
            name: '外来车辆',
            data: [120, 200, 150, 80, 70],
            type: 'bar',
            // showBackground: true,
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#78FFC7' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#00CD85' // 100% 处的颜色
                      }
                    ],
                    false
                ),
              }
            },
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
